<template>
  <Layout
    ><div class="grid p-4 device-page gap-y-4">
      <div class="grid grid-cols-5 gap-2">
        <Left class="col-span-2" />
        <Right class="col-span-3" :key="id" />
      </div>
      <AddDeviceModal /><AddDeviceBatchModal /></div
  ></Layout>
</template>

<script lang="ts">
import AddDeviceBatchModal from "@/components/modals/AddDeviceBatchModal.vue";
import AddDeviceModal from "@/components/modals/AddDeviceModal.vue";
import Layout from "@/layout/index.vue";
import { defineComponent, provide, ref } from "vue";
import Right from "./layouts/device/Right.vue";
import Left from "./layouts/device/Left.vue";

export default defineComponent({
  name: "DevicePage",
  components: {
    Layout,
    Right,
    Left,
    AddDeviceModal,
    AddDeviceBatchModal,
  },
  setup() {
    const id = ref<number>(0);
    const refresh = () => {
      id.value++;
    };
    provide("refresh", refresh);
    return { id };
  },
});
</script>

<style scoped lang="scss"></style>
